import React,{Component} from 'react'

import {Route,Switch} from "react-router-dom";

import main_PC from './pages/pc/main'
import main_mobile from './pages/mobile/main'


export default class App extends Component{
    constructor(props) {
        super(props);
        this.state = {
            type:'',
            path:''
        }
    }
    componentDidMount(){
        this.getSize()
        window.onresize = ()=>{
            this.getSize()
        }
    }
    getSize = () =>{
        let navigatorWidth = document.body.clientWidth
        let toPath = window.document.location.pathname
        var action = {type:'editDeviceType',index:''}
        if(navigatorWidth < 425 && this.state.type !== 'mobile'){
            if(toPath.indexOf('/m') === -1){
                toPath = '/m' + toPath
            }
            window.history.pushState('','',toPath)
            this.setState({path:toPath})
            this.setState({type:'mobile'})
            action.index = 'mobile'
            this.$store.dispatch(action)
        }else if(navigatorWidth > 425 && this.state.type !== 'pc'){
            if(toPath.indexOf('/m') !== -1){
                toPath = toPath.slice(2)
            }
            window.history.pushState('','',toPath)
            this.setState({path:toPath})
            this.setState({type:'pc'})
            action.index = 'pc'
            this.$store.dispatch(action)
        }
        console.log(this.$store.getState().deviceType)
    }
    // componentWillUnmount() {
    //     window.removeEventListener('scroll',this.bindHandleScroll)
    // }

    render() {
        // 需要根据界面宽度来决定跳转至移动端或pc端 /  路径错误跳转至对应的报错页面
        if(this.state.type === 'mobile'){

            return(
                /* mobile端 */
                    <Switch>
                        <Route path='/m/' component={main_mobile}/>
                    </Switch>
            )
        }else if(this.state.type === 'pc'){

            return(
                /*  pc端 */
                    <Switch>
                        <Route path='/' component={main_PC} />
                    </Switch>
            )
        }else{
            return <></>
        }
    }

}
